<template>
  <div class='mall'>
    <van-tabs
      line-height="1px"
      line-width="30px"
    >
      <van-tab
        v-for="
      item
      in
      titles"
        :title="item.title"
        :key="item.id"
      >
        <template #title>
          <div @click="getImages(item.id)">
            {{item.title}}
          </div>
        </template>
        <div class="content">
          <van-search
            v-model="value"
            shape="round"
            background="rgb(244,244,244)"
            placeholder="哆啦A梦"
          />
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
          >
            <van-swipe-item
              v-for="imglunbo in imgsLunBo"
              :key="imglunbo"
            >
              <img
                :src="imglunbo"
                alt=""
              >
            </van-swipe-item>
          </van-swipe>
          <div class="recommend">
            <img
              v-for="imgR in imgRecommend"
              :key="imgR"
              :src="imgR"
              alt=""
            >
          </div>
          <div class="goods">
            <div class="top">
              <div class="title">爆款限时秒杀</div>
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div class="goodsBox">
              <div
                class="good"
                @click="gotoDetail"
              >
                <img
                  src="//p0.meituan.net/movie/383b522f45b8f1c1a4f22aba3b6d85d1117240.jpg"
                  alt=""
                >
                <div class="good-describe">武庚纪银饰系列</div>
                <div class="good-price">
                  <div class="sale-price">¥138</div>
                  <div class="origin-price">¥198</div>
                </div>
              </div>
              <div class="good">
                <img
                  src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                  alt=""
                >
                <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                <div class="good-price">
                  <div class="sale-price">¥9.9</div>
                  <div class="origin-price">¥69</div>
                </div>
              </div>
              <div class="good">
                <img
                  src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                  alt=""
                >
                <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                <div class="good-price">
                  <div class="sale-price">¥9.9</div>
                  <div class="origin-price">¥69</div>
                </div>
              </div>
            </div>
            <div class="top1">
              <div class="left">阴阳师</div>
              <div class="right">更多 ></div>
            </div>
            <div class="goodsBox">

              <div class="good">
                <img
                  src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                  alt=""
                >
                <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                <div class="good-price">
                  <div class="sale-price">¥9.9</div>
                </div>
              </div>
              <div class="good">
                <img
                  src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                  alt=""
                >
                <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                <div class="good-price">
                  <div class="sale-price">¥9.9</div>
                </div>
              </div>
              <div class="good">
                <img
                  src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                  alt=""
                >
                <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                <div class="good-price">
                  <div class="sale-price">¥9.9</div>
                </div>
              </div>
            </div>
            <div class="possible">
              <p class="recommend-title">你可能喜欢</p>
              <div class="goodsAll">
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
                <div class="good">
                  <img
                    src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
                    alt=""
                  >
                  <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
                  <div class="good-price">
                    <div class="sale-price">¥9.9</div>
                    <div class="origin-price">¥69</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    titles: [],
    imgsLunBo: ['https://p1.meituan.net/movie/709a76572ed5b35f466796c2470cc28a48239.jpg',
      'https://p0.meituan.net/movie/cdf6271d25b6621e77284d096688946970476.jpg',
      'https://p0.meituan.net/movie/d3452476cbd6cd39070ec9da5e1ab292146332.jpg',
      'https://p1.meituan.net/movie/8552612619f6950ad56ba3ac600f6bd690560.jpg',
      'https://p0.meituan.net/movie/05801246b9616a6b68a1ecb45329249182377.jpg',
      'https://p1.meituan.net/movie/2778739b3faf8cdc29ca989adc30d4fe127271.png'],
    imgRecommend: ['https://p1.meituan.net/moviemachine/e8f101992d6ffa7e3dc29ec4392052bf40813.jpg@60q',
      'https://p0.meituan.net/moviemachine/a8fa9c032b545f24e2053c33c2e9c86c56411.png@60q'],
    timeData: {
      seconds: 30,
      hours: 20,
      minutes: 45
    },
    time: 100000000
  }),
  methods: {
    gotoDetail() {
      this.$router.push('/goodsinfo')
    }
  },
  created() {
    const titleData = [
      {
        id: 0,
        isdel: 0,
        title: '推荐'
      },
      {
        id: 1,
        isdel: 0,
        title: '新品'
      },
      {
        id: 2,
        isdel: 0,
        title: '3c配件'
      },
      {
        id: 3,
        isdel: 0,
        title: '手办公仔'
      },
      {
        id: 4,
        isdel: 0,
        title: '潮玩盲盒'
      },
      {
        id: 5,
        isdel: 0,
        title: '生活影饰'
      }]
    console.log(titleData)
    this.titles = titleData
  }
}
</script>
<style lang="scss">
.mall {
  .van-tabs__nav {
    // 导航项的默认字体大小和颜色
    .van-tab {
      font-size: 15px;
      color: #6c7076;
    }
    // 导航项选中时字体变粗，字体大小变大（同级别所以要提升权重）
    .van-tab--active {
      font-size: 17px !important;
      color: #333 !important;
    }
  }
  .content {
    padding: 0 10px;
    .van-search {
      .van-search__content--round {
        background: #fff !important;
      }
    }
    .my-swipe {
      border-radius: 9px;
      height: 105px;
      text-align: center;
      .van-swipe-item {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .recommend {
      margin-top: 20px;
      display: flex;
      height: 60px;
      justify-content: space-between;
      img {
        width: 48%;
        border-radius: 9px;
      }
    }
    .goods {
      .top {
        display: flex;
        align-items: center;
        background: rgb(255, 237, 236);
        height: 60px;
        line-height: 60px;
        padding-left: 10px;
        margin-top: 10px;
        .title {
          margin-right: 10px;
        }
        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #ff544f;
        }
        .block {
          display: inline-block;
          width: 22px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #ff544f;
          border-radius: 4px;
        }
      }
      .top1 {
        display: flex;
        padding-left: 6px;
        padding-top: 10px;
        padding-right: 16px;
        background: linear-gradient(
          135deg,
          rgb(242, 238, 255) 0%,
          rgb(255, 255, 255) 100%
        );
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #333;
        }
        .right {
          font-size: 12px;
          color: #aaa;
        }
      }
      .goodsBox {
        padding-top: 20px;
        height: 200px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;

        .good {
          margin-top: 10px;
          img {
            width: 100px;
            height: 100px;
            border-radius: 6px 6px 0 0;
          }
          .good-describe {
            height: 37px;
            font-size: 13px;
            margin: 6px;
            overflow: hidden;
            width: 100px;
            margin: 6px;
          }
          .good-price {
            display: flex;
            margin-left: 6px;
            .sale-price {
              font-size: 15px;
              color: #ed3934;
            }
            .origin-price {
              margin-left: 7px;
              font-size: 12px;
              color: #aaa;
              text-decoration: line-through;
            }
          }
        }
      }
      .possible {
        .recommend-title {
          padding-bottom: 12px;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #333;
        }
        .goodsAll {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .good {
            width: 165px;
            background: #fff;
            margin-bottom: 10px;
            img {
              width: 165px;
              height: 165px;
              border-radius: 6px 6px 0 0;
            }
            .good-describe {
              height: 37px;
              font-size: 13px;
              margin: 6px;
              overflow: hidden;
              width: 165px;
              margin: 6px;
            }
            .good-price {
              display: flex;
              margin-left: 6px;
              .sale-price {
                font-size: 15px;
                color: #ed3934;
              }
              .origin-price {
                margin-left: 7px;
                font-size: 12px;
                color: #aaa;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>
